<template>
    <div class="login-box">
        <header>
            <div class="title">
                <div class="login">
                    {{ t('login.login') }}
                </div>
                <div class="lang" @click="show = true">
                    {{ t('language') }}
                </div>
            </div>
        </header>
        <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
        <main>
            <myInput v-model="loginForm.username" :placeholder="t('login.username')"></myInput>
            <myInput v-model="loginForm.password" :placeholder="t('login.password')" icon-name="eye" type="password">
            </myInput>
            <div class="btn">
                <button class="submit" @click="submit">{{ t('login.login') }}</button>
                <button class="guest" @click="touristLogin">{{ t('login.guest') }}</button>
                <button class="register" @click="goRegister">{{ t('login.register') }}</button>
            </div>
        </main>
        <footer>
            <div class="footer">
                <span class="decoration">{{ t('login.decoration') }}</span>
                <span class="customer">{{ t('login.customer') }}</span>
            </div>
        </footer>
    </div>
</template>

<script setup>
import useLanguage from '@/hooks/useLanguage';
import myInput from '@/components/Input/index.vue';
import { useRouter } from 'vue-router'
import { reactive, onMounted, ref } from 'vue';
import { userApi } from '@/api'
import { setToken, setLanguageCode } from '@/modules/auth';
import { showNotify } from 'vant';
import { storeToRefs } from 'pinia'
import { UserStore } from '@/store/user';

const userStore = UserStore()
const { curIndex } = storeToRefs(userStore)

const { t, toggleLocale, language } = useLanguage()
const router = useRouter()
onMounted(() => {
    setLanguageCode(language.value)
})


const loginForm = reactive({
    username: '',
    password: ''
})

const rules = {
    username: [{ rule: /^.{5,18}$/, message: t('login.username-rule') }],
    password: [{ rule: /^.{6,18}$/, message: t('login.password-rule') }]
}

function validate(key) {
    let s = true
    rules[key].forEach(v => {
        if (!v.rule.test(loginForm[key])) {
            // 弹窗
            showNotify({ type: 'danger', message: v.message })
            s = false
            return false
        }
    })
    return s
}

function submit() {
    if (!validate('username')) return // 当validate('username')为false才执行
    if (!validate('password')) return // 当validate('password')为false才执行
    // 登录
    userLogin()
}

async function userLogin() {
    const postData = {
        userName: loginForm.username,
        password: loginForm.password
    }
    // const res = await userApi.userLogin(postData)
    const { code, data, msg } = await userApi.userLogin(postData)
    if (code == 20000) {
        showNotify({ type: 'primary', message: t('login.success') });
        curIndex.value = 0
        setToken(data)
        router.push({ name: 'home' })
    }
}

async function touristLogin() {
    const { code, data, msg } = await userApi.touristLogin()
    if (code == 20000) {
        showNotify({ type: 'primary', message: t('login.success') });
        curIndex.value = 0
        setToken(data)
        router.push({ name: 'home' })
    }
}

const show = ref(false);
const actions = [
    { name: t('lang.zh'), value: 'zh' },
    { name: t('lang.en'), value: 'en' },
    { name: t('lang.ja'), value: 'ja' },
];
const onSelect = (item) => {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    show.value = false;
    toggleLocale(item.value);
};

function goRegister(params) {
    router.push({ name: 'register' })
}
</script>

<style lang="less" scoped>
.login-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
    margin-top: 150px;

    .title {
        padding: 10px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        div {
            font-size: 24px;
            font-weight: 900;
        }
    }
}

main {
    margin-top: 50px;
    padding: 0 20px;

    .form {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        input {
            width: 340px;
            height: 50px;
            border-radius: 3px;
            border: 1px solid #E7E7E7;
            box-sizing: border-box;
            padding: 0 40px;
            margin: 10px 0;
            outline: none;
            background: none;
            font-size: 22px;
            transition: all 0.3s;
        }

        .username,
        .password {
            position: relative;

            .icon {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 20px;
            }

            .placeholder {
                position: absolute;
                left: 40px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 16px;
                color: #000;
                transition: all 0.3s;
            }

            .focus {
                left: 30px;
                top: 15%;
                font-size: 12px;
                padding: 0px 3px;
                background-color: #fff;
            }

            .inputFocus {
                border: 1px solid #000;
            }

            .icon-right {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 20px;
            }
        }

    }

    .btn {
        display: flex;
        flex-direction: column;
        width: 100%;

        button {
            border-radius: 5px;
            height: 40px;
            box-shadow: 0px 5px 5px #CDCDCD;
            margin-top: 20px;
            color: #fff;
        }

        .submit {
            background-color: #EF5350;
        }

        .guest {
            background-color: #02bd1e;
        }

        .register {
            background-color: #42A5F5;
        }
    }
}

footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;

    .footer {
        display: flex;
        flex-direction: column;
        margin: 10px 10px;

        span {
            color: #000;
            font-size: 14px;
        }

        .customer {
            margin-top: 5px;
            color: #FF9800;
            font-weight: 900;
        }
    }
}
</style>